import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Lade...

In diesem Beispiel:

• React.lazy wird verwendet, um MyComponent verzögert zu laden.
• Suspense umschließt LazyComponent.
• Die fallback-Prop bietet eine Fallback-Benutzeroberfläche (einen Ladeindikator), die angezeigt wird, während MyComponent geladen wird.

Error Boundaries implementieren

Während Suspense Ladezustände behandelt, sind Error Boundaries React-Komponenten, die JavaScript-Fehler irgendwo im Komponentenbaum ihrer Kinder abfangen, diese Fehler protokollieren und anstelle eines Absturzes des gesamten Komponentenbaums eine Fallback-Benutzeroberfläche anzeigen.

Wie Error Boundaries funktionieren

Error Boundaries sind Klassenkomponenten, die die folgenden Lebenszyklusmethoden definieren:

• static getDerivedStateFromError(error): Diese Methode wird aufgerufen, nachdem ein Fehler von einer abgeleiteten Komponente geworfen wurde. Sie empfängt den geworfenen Fehler als Argument und sollte einen Wert zurückgeben, um den Zustand zu aktualisieren.
• componentDidCatch(error, info): Diese Methode wird aufgerufen, nachdem ein Fehler von einer abgeleiteten Komponente geworfen wurde. Sie empfängt den Fehler und ein Info-Objekt, das Informationen darüber enthält, welche Komponente den Fehler geworfen hat. Dies ist der ideale Ort, um den Fehler an einen Dienst wie Sentry oder Bugsnag zu protokollieren.

Wichtig: Error Boundaries fangen nur Fehler in den Komponenten unter ihnen im Baum ab. Ein Error Boundary kann keinen Fehler innerhalb seiner selbst abfangen.

Beispiel: Grundlegende Error Boundary-Implementierung

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Aktualisieren Sie den Zustand, damit das nächste Rendering die Fallback-Benutzeroberfläche anzeigt.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // Sie können den Fehler auch an einen Fehlerberichterstattungsdienst protokollieren
 console.error('Fehler abgefangen: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Sie können jede benutzerdefinierte Fallback-Benutzeroberfläche rendern
 return 
Etwas ist schief gelaufen.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Um das Error Boundary zu verwenden, umschließen Sie jede Komponente, die einen Fehler werfen könnte:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Suspense und Error Boundaries integrieren

Die wahre Stärke liegt in der Kombination von Suspense und Error Boundaries. Dies ermöglicht es Ihnen, sowohl Ladezustände als auch Fehler in Ihrer Anwendung elegant zu handhaben. Die empfohlene Vorgehensweise ist, Suspense mit einem Error Boundary zu umschließen. Auf diese Weise kann das Error Boundary, wenn die verzögert geladene Komponente nicht geladen werden kann (z. B. Netzwerkfehler), den Fehler abfangen und eine hilfreiche Meldung für den Benutzer anzeigen.

Beispiel: Kombination von Suspense und Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Lade...